
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('button').click(function () {
//            $('div').attr('title','替换title')//只替换一个标签
//            alert($('div').attr('title'));
//            $('div').attr({'title':'再次替换title','class':'myClass'});
//            alert($('div').attr('class'));
//            alert($('div').attr('title'));
//            alert($('div1').html('<h1>test</h1>-change'));//获取html内容
//            $('#dd').html('<h1>test1</h1>-change');//用id替换html内容
//            $('[name=div1]').html('<h1>test2</h1>-change');//用名字来定位标签替换html内容
//            $('img').toggle(3000);//对角线隐藏
//            $('img').slideUp(3000);//向上隐藏
//            $('img').slideToggle();//上、下隐藏
            //jq选择器
//            $('.ul01+ul').css('background','pink');//同级紧挨着一个
//            $('.ul01 .cl01').css('background','pink');//指定标签下的某个标签
//            $('.ul01>li').css('background','pink');//指定标签li组
//            $('.ul01~li').css('background','pink');//

            //jq过滤器
//            $('.ul01 li:first').css('background','pink');//第一个
//            $('.ul01 li:last').css('background','pink');//最后一个
//            $('.ul01 li:not(.cl01)').css('background','pink');//除了cl01之外
//            $('.ul01 li:gt(2)').css('background','pink');//大于第二个的被选中
//            $('.ul01 li:lt(2)').css('background','pink');//小于第二个的被选中
//            $('.cl01').parent().css('background','pink');//父级
//            $('.ul01').children().css('background','pink');//父级
            $('[name=div3]').css('background','pink');

        });

        $('ul li').click(function (e) {
            //jq排他,this即可定位到当前选择的标签，siblings即可找出当前选择之外的标签
            $(this).css('background','pink');
            $(this).siblings().css('background','#fff');
            alert($(this).index());//标签的索引值
        });

        //鼠标动作
        $('.ul01').hover(function () {
            $('img').stop().slideToggle();
        })

        //鼠标滑动显示与隐藏对象
        $('#titleList li').mouseover(function () {
            $(this).addClass('current');//鼠标落到某个对象给对象添加样式
            $(this).sibling().removeClass('current');//删除其他对象的样式
            //另外控制ul的某个展示
            $('#ulList ul').eq($(this).index()).sibling().hide();//隐藏不需要显示的标签，$(this).index()表示去除当前鼠标所在的标签索引值
            $('#ulList ul').eq($(this).index()).show();//显示当前鼠标所在的标签
        })
        //鼠标滑动显示与隐藏对象---简化
        $('#titleList li').mouseover(function () {
            //操作的对象都是$(this),可以进行合并
            $(this).addClass('current').sibling().removeClass('current');//删除其他对象的样式
            //另外控制ul的某个展示
            //未简化时要以$('#ulList ul').eq($(this).index())为一个整体，然后再在show后面加上slibling，因为$('#ulList ul').eq($(this).index()).sibling()是一个整体
            $('#ulList ul').eq($(this).index()).show().sibling().hide();//显示当前鼠标所在的标签
        })

    })
</script>
<head>
    <title>Title</title>
</head>
<body>
    <button>变色</button>
    <div  name="div3" title="原始title">老师您好，</div>
    <div name="div1" id="dd1">test1-div</div>
    <div name="div2" id="dd2">test2-div</div>

    <ul class="ul01">00000
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li class="cl01">01</li>
        <li class="cl02">02</li>
        <li class="cl03">03</li>
    </ul>
    <ul class="ul02">000001
        <li class="cl04">04</li>
        <li class="cl05">05</li>
        <li class="cl06">06</li>
    </ul>
    <img src="../../image/JPFC.jpg">
</body>
</html>
